<template>
	<view >
		<zw-header></zw-header>
		<view style="background: #fff;">
			<view class="container" >
				<view class="banner-wrap" v-if="sellerInfo.bannerPc">
					<swiper class="banner-swiper" :current="bannerIndex" :autoplay="autoplay" indicator-dots circular  @change="bannerChange" >
						<swiper-item class="swiper-item" v-for="(item, index) in sellerInfo.bannerPc.split(',')" :key="index">
							<image class="cover" :src="item"></image>
						</swiper-item>
					</swiper>
					<!-- 左右切换箭头 -->
					<view class="btn btn-left" @click="switchBanner(false)">
						<i class="icon i-left"></i>
					</view>
					<view class="btn btn-right" @click="switchBanner(true)">
						<i class="icon i-right"></i>
					</view>
				</view>
				<view style="width: 100%;height: 30px;"></view>
				<view class="main">
					<view class="sellerBox">
						<view class="sellerLogo"><image :src="sellerInfo.logo"></image></view>
						<view class="sellerName">{{sellerInfo.name}}</view>
						<view class="line"></view>
						<view class="sellerRow">
							<text>店铺地址:<text>{{sellerInfo.address}}</text></text>
						</view>
						<view class="sellerRow">
							<text>联系方式:<text>{{sellerInfo.contactPhone}}</text></text>
						</view>
						<view class="sellerRow">
							<text>营业时间:
								<text v-if="sellerInfo.openHoursEnd == sellerInfo.openHoursStart">全天</text>
								<text v-else>{{sellerInfo.openHoursStart}} - {{sellerInfo.openHoursEnd}}</text>
							</text>
						</view>
						<view class="btnList">
							<a class="sellerBtn_1" v-if="care" @click="getCancel()">
								<image src="../../static/image/common/starOn.png"></image>
								已收藏
							</a>
							<a class="sellerBtn_1" v-else @click="getCare()">
								<image src="../../static/image/common/star.png"></image>
								收藏店铺
							</a>
						</view>
					</view>
					<view class="content">
						<view class='notice'>
							<view class="title">商家公告</view>
							<view class="noticeList" v-if="notice.length>0">
								<view v-for="(item,index) in notice" :key="index"  @click="toNotice(item.id)" class="noticeTit">
									<view class="dot"></view><text>{{item.title}}</text>
								</view>
							</view>
							<view class="gongao-detai" v-else>暂无公告</view>
						</view>
						<view class='goods'>
							<view class="title">店铺商品</view>
							<view class="sort">
								<view class="sortList">
									<view class="label elip">筛选：</view>
									<view class="list">
										<block v-for="(item, index) in sortModes" :key="index">
											<view class="item">
												<text :class="['name elip', {'active': sortIndex == index}]" @click="change(index)">
													{{item}}
												</text>
											</view>
										</block>
									</view>
								</view>
							</view>
							<!-- 商品列表 -->
							<view class="goods-wrap" v-if="!nullInfo">
								<block v-for="(item, index) in goodsList" :key="index">
									<a class="goods" :href="`#/pages/goods/index?id=${item.productId}`" target="_blank" >
										<view class="goodsItem">
											
											<u-lazy-load 
											 height='184px' 
											 style='width: 184px;display: flex;justify-content: center;'
											 :image="item.logoUrl" 
											 img-mode="heightFix"
											 :duration='300'
											 ></u-lazy-load>
											<view class="goodsPrice">
												<text class="price">¥{{item.price}}</text>
												<view class="tag " v-if="item.agencyPrice">¥{{item.agencyPrice}} 代理商专属价</view>
											</view>
											<view class="goodsName elip_2">{{item.name}}</view>
											<view class="goodsTip">
												<!-- <text>赚{{goods.profit}}元</text> -->
												<text></text>
												<text>{{item.sellNum}}人付款</text>
											</view>
										</view>
									</a>
								</block>
							</view>
							<view class="goods-empty" v-else>
								<image src="../../static/image/common/nullInfo.png"></image>
								抱歉，没有找到符合条件的商品~
							</view>
							<pagination :pageNumber="pageNum" :totalSize="totalSize" @change="pageChange"></pagination>
							
						</view>
					</view>
				</view>
			</view>
			<tool-bar :scrollTop="scrollTop"></tool-bar>
			
		</view>
		
		
		<zw-footer></zw-footer>
	</view>
</template>
<script>
	import { getAccToken,removeAccToken,removeRefToken } from '@/userToken.js';
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import pagination from '@/components/common/pagination.vue';
	import filterList from '@/components/search/filter-list.vue';
	import toolBar from '@/components/home/tool-bar.vue';
	
	export default {
		components: {
			menuWrapper,
			pagination,
			filterList,
			toolBar,
			scrollTop:0
		},
		data() {
			return {
				lists: [],
				active: 0,
				sellerInfo: {banner:''},
				sortModes: ['热门', '销量', '最新'],
				sortIndex: 0,
				imageUrl: '',
				scrollto: '',
				shopId: '',
				isHot: 1,
				priceAsc:0,
				priceDesc:0,
				onSellDesc: 0,
				soldNumDesc: 0,
				pageNum: 1,
				goodsList: [],
				nullInfo: false,
				totalSize: 0,
				care:true,
				notice:[],
				swiperHeight:300,
				showInfo:{},
				scrollTop:0,
				banners: [],
				bannerIndex: 0,
				categories: [],
				categoryIndex: -1,
				autoplay: true
			}

		},
		onLoad(e) {
			this.shopId = e.id
			this.getInfo(e.id)
			this.getNotice(e.id)
			
			this.swiperHeight = uni.getStorageSync('swiperHeight-a')
			if(getAccToken()){
				this.getCareList()
			}
		},
		
		methods: {
			bannerChange(e) {
				this.bannerIndex = e.detail.current;
			},
			switchBanner(toNext) {
				this.autoplay = false;
			
				if (toNext) {
					if (this.bannerIndex < this.sellerInfo.bannerPc.split(',').length - 1) {
						this.bannerIndex++;
					} else {
						this.bannerIndex = 0;
					}
				} else {
					if (this.bannerIndex == 0) {
						this.bannerIndex = this.sellerInfo.bannerPc.split(',').length - 1;
					} else {
						this.bannerIndex--;
					}
				}
			
				setTimeout(() => {
					this.autoplay = true;
				}, 2000);
			},
			pageChange(e) {
				this.pageNum = e;
				this.goodsList = [];
				this.getData();
				uni.pageScrollTo({
					scrollTop: 550,
					duration: 0
				});
			},
			checkMsg(){
				uni.request({
					url:this.totalUrl + '/api/wx/settings/2',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.showInfo = res.data.data
						} 
					}
				})
			},
			makePhone(callPhone){
				plus.device.dial(callPhone, true);
			},
			getNotice(id){
				uni.request({
					url: this.serverUrl + '/user/userSeller/noticeList/' + id,
					method: 'POST',
					data:{
						pageNum: 1,
						pageSize: 5
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.notice = res.data.data.list
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			toExtend(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			getInfo(id) {
				uni.request({
					url: this.serverUrl + '/user/userSeller/seller/' + id,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.sellerInfo = res.data.data
							setTimeout(() => {
								// 修改网站标题
								uni.setNavigationBarTitle({
									title: `${res.data.data.name} - 翼宝商城`
								});
							}, 100);
							this.getData()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			getData() {
				var that = this
				var params = {
					pageNum: that.pageNum,
					pageSize: 12,
					isHot: that.isHot,
					onSellDesc: that.onSellDesc,
					soldNumDesc: that.soldNumDesc,
					sellerId: that.sellerInfo.id
				}
				if(that.priceAsc==1){
					params.priceAsc = 1
				}
				if(that.priceDesc == 1){
					params.priceDesc = 1
				}
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				uni.request({
					url: this.serverUrl + '/user/product/specialArea',
					method: 'POST',
					data: params,
					header:{
						'token': getAccToken(),
						'Lang':'zh'
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							that.totalSize = Number(res.data.data.totalCount);
							var data = res.data.data.list;
							for (var i = 0; i < data.length; i++) {
								that.goodsList.push(data[i]);
							}
							if (that.goodsList.length == 0) {
								that.nullInfo = true
							} else {
								that.nullInfo = false
							}
						} else {
							that.nullInfo = true
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			change(index){
				this.sortIndex = index;
				this.pageNum = 1;
				this.goodsList = [];
				if (index ==  0) {
					this.isHot = 1
					this.soldNumDesc = 0
					this.onSellDesc = 0
					this.getData()
				}else if(index == 1){
					this.isHot = 0
					this.soldNumDesc = 1
					this.onSellDesc = 0
					this.getData()
				}else{
					this.isHot = 0
					this.soldNumDesc = 0
					this.onSellDesc = 1
					this.getData()
				}
			},
			toIn(id) {
				uni.navigateTo({
					url: '/pages/detail/goodsInvented?id=' + id
				})
			},
			
			toMore(url) {
				uni.navigateTo({
					url: url
				})
			},
			getCareList(){
				this.uni_request({
					url:'/user/userFollowSeller/follow/exist/'+this.shopId,
					method:'POST',
					success:(res) => {
						if(res.data.code == 0 || res.data.code == 200){
							if(res.data.data == 0){
								this.care = false
							}else{
								this.care = true
							}
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
					}
				})
			},
			// 关注
			getCare(){
				this.uni_request({
					url:'/user/userFollowSeller/follow/' + this.shopId,
					method:'POST',
					success:(res) => {
						if(res.data.code == 0 || res.data.code == 200){
							this.care = true
							this.$alert('已收藏该商家',  () => {
								
							}, () => {
								
							});
							
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
					}
				})
			},
			// 取消关注
			getCancel(){
				this.uni_request({
					url:'/user/userFollowSeller/cancelFollow/' + this.shopId,
					method:'POST',
					success:(res) => {
						
						if(res.data.code == 0 || res.data.code == 200){
							this.care = false
							this.$alert('收藏已取消', () => {
								
							}, () => {
								
							});
							
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}
	.container{
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 0 8vw;
		position: relative;
	}
	.main{
		justify-content: space-between;display: flex;align-items: flex-start;
		.title{font-size: 16px;}
		
		.content{
			width: 915px;
			.goods{
				margin-top: 20px;
				padding: 5px;
				.sort {
					background-color: $bg-color;
					font-size: 15px;
					.sortList {
						width: 100%;
						margin: 0 auto;
						display: flex;
						min-height: 60px;
						position: relative;
				
						&.separator {
							border-top: 1px solid $border-color;
						}
				
						.label {
							color: #b0b0b0;
							min-width: 45px;
							line-height: 60px;
						}
						.list {
							display: flex;
							flex-wrap: wrap;
							overflow: hidden;
							transition: height .3s ease-in;
						
							.item {
								width: 105px;
								height: 60px;
								line-height: 60px;
								text-align: center;
								.name {
									max-width: 145px;
									display: inline-block;
									color: #424242;
									cursor: pointer;
						
									&.active,
									&:hover {
										color: $color-primary;
									}
								}
							}
						}
					}
				}
				.goods-wrap {
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					min-height: 1000px;
					.goods {
						position: relative;
						width: 210px;
						height: 300px;
						padding: 15px 0;
						margin-right: 14px;
						margin-bottom: 14px;
						background-color: $bg-color;
						transition: box-shadow .3s linear;
						display: flex;
						flex-direction: column;
						align-items: center;
						.goodsItem{
							image{
								width: 184px;
								height: 184px;
							}
							display: flex;align-items: center;flex-direction: column;
							width: 184px;
							background-color: #fffff;
							cursor: pointer;
							.goodsName{
								padding: 0 5px;width: 100%;color: #4f4f4f;font-size: 15px;
								display: flex;justify-content: flex-start;align-items: center;
							}
							.goodsTip{
								display: flex;justify-content: space-between;align-items: center;
								padding: 0 10px;width: 100%;color: #999;font-size: 12px;position: absolute;
								bottom:10px;right: 2px;
							}
							.goodsPrice{
								padding: 8px 5px 5px 5px;width: 100%;
								display: flex;justify-content: flex-start;align-items: center;
								.tag{
									background: rgb(253,226,94);color:#633b14;font-size: 12px;padding: 1px 2px;border-radius: 3px;
									margin-left: 5px;
								}
								.price{
									font-size: 22px; font-weight: 700;color: #e93323;
								}
								.market{
									color: #aaa;font-weight: 500;
									font-size: 12px;
									text-decoration: line-through;
									margin-left: 8px;
								}
							}
						}
						&:hover {
							box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
						}
				
						.thumb {
							width: 200px;
							height: 200px;
							cursor: pointer;
							margin-bottom: 16px;
						}
				
						.name {
							color: $text-color;
							width: 230px;
							margin-bottom: 3px;
							font-weight: 400;
							cursor: pointer;
							text-align: center;
						}
				
				
						.thumbs {
							@extend %flex-align-center;
				
							.thumb-mini {
								width: 34px;
								height: 34px;
								margin: 0 4px;
								border: 1px solid #e0e0e0;
								cursor: pointer;
								transition: border-color .2s linear;
				
								&.active,
								&:hover {
									border-color: $color-primary;
								}
							}
						}
					}
				}
				
				.goods-empty {
					color: $text-color;
					height: 650px;
					width: 100%;
					display: flex;align-items: center;justify-content: center;flex-direction: column;
				}
			}
			.notice{
				background: #ececec;
				padding: 5px;
				.gongao-detai {
					color: #999;
					flex-wrap: wrap;
					position: relative;
					padding: 10px 20px;
					letter-spacing: 0.5px;
				}
				.noticeList{
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					margin-top: 10px;
					padding: 0 25px;
					font-size: 15px;
					.noticeTit{
						margin-bottom: 10px;
						color: #444;
						display: flex;
						align-items: center;
						.dot{
							height: 5px;width: 5px;background: #444;border-radius: 50%;margin-right: 5px;
						}
						text{
							overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
							-webkit-line-clamp: 1;-webkit-box-orient: vertical;
							width: calc(100% - 10px);
						}
					}
					.noticeTit:last-child{margin: 0;}
				}
			}
		}
		.sellerBox{
			width: 250px;padding: 10px;border-radius: 2px;
			justify-content: flex-start;flex-direction: column;
			border: 1px solid #c50000;@extend %flex-align-center;
			.sellerLogo{
				image{width: 90px;height: 90px;border-radius: 50%;}
			}
			.sellerName{font-size: 16px;color: #000;font-weight: bold;margin-top: 3px;}
			.line{width: 100%;height: 1px;background: #ddd;margin: 6px 0;}
			.sellerRow{
				width: 100%;@extend %flex-align-center;justify-content: flex-start;flex-wrap: wrap;
				margin-bottom: 6px;font-size: 13px;color: #777;
			}
			.sellerBtn{
				width: 100px;
				margin: 10px;
				height: 30px;text-align: center;
				line-height: 30px;
				border-radius: 5px;cursor: pointer;
				color: #ececec;
				background: #e93323;
			}
			.btnList{
				@extend %flex-align-center;
			}
			.sellerBtn{
				width: 100px;
				margin: 10px 5px;
				height: 30px;text-align: center;
				line-height: 30px;
				border-radius: 5px;cursor: pointer;
				color: #ececec;
				background: #e93323;
			}
			.sellerBtn_1{
				width: 100px;
				margin: 10px 5px;
				height: 30px;text-align: center;
				@extend %flex-align-center;
				justify-content: center;
				line-height: 30px;
				border-radius: 5px;cursor: pointer;
				color: #e93323;
				border: 1px solid #e93323;
				image{
					width: 22px;height: 22px;margin-right: 3px;
				}
			}
		}
	}
	.banner-wrap {
		position: relative;
	
		::v-deep .uni-swiper-wrapper .uni-swiper-dots {
			right: 20px;
			left: auto;
			top: 92%;
			display: flex;
			transform: translateY(0);
	
			.uni-swiper-dot {
				width: 6px;
				height: 6px;
				margin: 0 5px;
				border: 2px solid;
				border-color: hsla(0, 0%, 100%, .3);
				border-radius: 10px;
				background: rgba(0, 0, 0, .4);
	
				&.uni-swiper-dot-active {
					background: hsla(0, 0%, 100%, .4);
					border-color: rgba(0, 0, 0, .4);
				}
			}
		}
	
		&,
		.banner-swiper,
		.cover {
			max-width: $page-width;
		min-width: $page-minwidth;
			height: 420px;
		}
	
		.btn {
			position: absolute;
			top: 50%;
			width: 41px;
			height: 69px;
			transform: translateY(-50%);
			cursor: pointer;
			border-radius: 2px;
			@extend %flex-align-center;
			justify-content: center;
	
			&:hover {
				background-color: rgba(0, 0, 0, .6);
			}
	
			.icon {
				font-size: 30px;
				color: $border-color;
			}
	
			&.btn-left {
				left: 0px;
			}
	
			&.btn-right {
				right: 0;
			}
		}
	}
	
</style>
